<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/manager.css"/>
		<!--画图插件-->
		<script src="../../js/Chart.addTest.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">


		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="javascript:history.go(-1)"><img class="headImg" src="../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">基础积分</p>
				</div>
				<div id="content" style="padding-bottom: 0;">
					<div class="topInte" >
						<p style=""><img  src="./images/jifen.png"/>基础积分数：<span id="jifenNum">0</span></p>
						<p>每一分积累，都见证成长！</p>
					</div>
					<div style="padding-top: 0.5rem;">
						<!--<p style="padding-left: 0.5rem;">
							<span>时间：</span> <input style="width: 3rem;"  id="">
							<img style="width: 0.5rem;" src="../../images/manager/guanliCheck.png"/>
							--
							</span> <input style="width: 3rem;" type="" name="" id="" value="" />
							<img style="width: 0.5rem;" src="../../images/manager/guanliCheck.png"/>
						</p>-->
						<p class="titleInte">基础统计图</p>
						<div class="jifenBox" style="padding-left: 0.5rem;">
							<div class="jifenContent" id="jifenContent">
								<!--<p>
									<div style="background-color: #ad6f6d;"></div>
									<span  >职位：<label>111</label> </span>
								</p>
								<p>
									<div style="background-color: #6eaead;"></div>
									<span  >学历：<label>100</label> </span>
								</p>
								<p>
									<div style=" background-color: #706fac;"></div>
									<span  >工龄：<label>301</label> </span>
								</p>
								<p>
									<div style=" background-color: #ac9d6d;"></div>
									<span  >特长：<label>211</label> </span>
								</p>
								<p>
									<div style="background-color: #a06fac;"></div>
									<span  >职称：<label>511</label> </span>
								</p>-->
							</div>
						</div>
						
						<div style="text-align: center;">
							<canvas id="canvas" height="175" width="175" ></canvas>
						</div>
						<div>
							 <a href="jichubiao.html" style="margin-top: 1rem;">
							 	<p style="font-size: 0.38rem;margin: 0 auto;color: white;border-radius: 20px;padding: 0.18rem; width:5rem;background:#e93340;;text-align: center;font-weight: 400;">统计表</p>
							 </a>
						</div>
						
					</div>
					
					
					
				</div>
			</div>
			<div id="foot" class="row">
				<a class="foot col-xs-3 col-sm-3" href="../kaoqin/index2.html">
					<img class="footImg" src="../../images/guanlixuanzhong.png" />
					<p>管理</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../coalition/colalition.html">
					<img class="footImg" src="../../images/lianmengchushi.png" />
					<p>联盟</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../store/store.html">
					<img class="footImg" src="../../images/11.png" />
					<p>商城</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../personage/personIndex.html">
					<img class="footImg" src="../../images/13.png" />
					<p>我的</p>
				</a>
			</div>
		</div>

	</body>
	<script src="../../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script type="text/javascript">
		var mycars = new Array("#FF6347","#FF34B3","#FFC125","#912CEE","#969696","#458B00","#00FFFF","#0A0A0A","#8B7500","#CAFF70","#E9967A","#EE3A8C","#EEE9BF","#B0E2FF","#8E8E38","#8B1C62","#7A67EE","#458B00","#00EE00","#7A7A7A","#FFC0CB","#FCFCFC","#F0E68C","#EE00EE","#C1FFC1","#B03060","#8B0000","#7AC5CD","#5F9EA0","#00CDCD");
		$(function() {
			//查询基础积分列表，默认会员id1，企业id1，状态为jc，目前时间为当前月份，其实时间应该和上级一样
			$.ajax({
				type: "get",
				url: "http://10.0.47.157:5555/attencepoint-service/tfPointDetailList?memberId=1&biId=1&status=jc&startDate=2017-11-01%2000%3A00%3A00&endDate=2017-11-28%2000%3A00%3A00",
				async: true,
				success: function(data) {
					if(data != null){
						var num = data.length;
						var sum = 0;
						//得到积分的总数
						for(var i=0;i<num;i++){
							sum += data[i].num *1;
						}
						var jifenNum=0;
						var str = [];
						var html = "";
						for(var j=0;j<num;j++){
							jifenNum += data[j].num*1;
							
							//ary.push('{value:'+data[j].num+',color:"'+mycars[j]+'",text:"'+Math.round(data[j].num/sum*100)+'%"}');*/
							var pieDataFn = {
								value:data[j].num,
								color:mycars[j],
								text:Math.round(data[j].num/sum*100)+"%"
							}
							if(j == num-1){
								str.push(pieDataFn);
							}else{
								str.push(pieDataFn);
							}
							html += '<p><div style="background-color: '+mycars[j]+';"></div><span  >'+data[j].status+'：<label>'+data[j].num+'</label> </span></p>'
						}
						
						$("#jifenNum").html(jifenNum);
						$("#jifenContent").html(html);
						/*pieData2 = 
							[{
								value: 111,
								color:"#ad6f6d"
								,text: "9%"
							},
							{
								value : 100,
								color : "#6eaead"
								,text: "8.1%"
							},
							{
								value : 301,
								color : "#706fac"
								,text: "24.4%"
							},
							{
								value : 211,
								color : "#ac9d6d"
								,text: "17.1%"
							},
							{
								value : 511,
								color : "#a06fac"
								,text: "41.4"
							}
						];*/
						var canvas = document.getElementById("canvas");
						var myPie = new Chart(canvas.getContext("2d")).Pie(str);
					}
				}
			});
			
		})


	</script>

</html>